<template>
	<a-card :bordered="false">
		<div class="table-page-search-wrapper">
			<a-form layout="inline">
				<a-row :gutter="20">
					<a-col :span="7">
						<a-form-item label="物料名称">
							<a-input allowClear v-model="queryParam.materialName" placeholder="请输入物料名称" />
						</a-form-item>
					</a-col>
					<a-col :span="7">
						<a-form-item label="料号">
							<a-input allowClear v-model="queryParam.materialCode" placeholder="请输入料号" />
						</a-form-item>
					</a-col>
					<a-col :span="7">
						<a-form-item label="物料分类">
							<a-radio-group v-model="queryParam.materialType" button-style="solid">
								<a-radio-button :value="null">
									全部
								</a-radio-button>
								<a-radio-button :value="item.id" v-for="(item, index) in materialTypeList" :key="index">
									{{ item.name }}
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="类型">
							<a-radio-group v-model="queryParam.type" button-style="solid">
								<a-radio-button :value="item.id" v-for="(item, index) in typeList" :key="index">
									{{ item.name }}
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="7">
						<a-form-item label="状态">
							<a-radio-group v-model="queryParam.executeStatus" button-style="solid">
								<a-radio-button :value="null">
									全部
								</a-radio-button>
								<a-radio-button :value="item.id" v-for="(item, index) in executeStatusList" :key="index">
									{{ item.name }}
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<span class="table-page-search-submitButtons"
							:style="advanced && { float: 'right', overflow: 'hidden' } || {}">
							<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
							<a-button style="margin-left: 8px"
								@click="() => { queryParam = { materialType: null }; $refs.table.refresh(true); }">重置</a-button>
						</span>
					</a-col>

				</a-row>
			</a-form>
		</div>

		<div class="table-operator" v-if="isCaiwu()">
			<a-button type="primary" @click="passOrReject(true)">审批通过</a-button>
			<a-button type="danger" @click="passOrReject(false)">审批不通过</a-button>
		</div>

		<s-table ref="table" :scroll="{ x: 1400, y: 500 }" size="default" :columns="myColumn" :data="loadData" :alert="true"
			:rowKey="(record) => record.replaceApplyId"
			:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
			<span slot="executeStatus" slot-scope="text, record">
				<template>
					<span v-if="record.executeStatus == 1" style="color: #409EFF;">待审核</span>
					<span v-if="record.executeStatus == 2" style="color: #67C23A;">通过</span>
					<span v-if="record.executeStatus == 3" style="color: #F56C6C;">拒绝</span>
				</template>
			</span>
			<span slot="action" slot-scope="text, record">
				<span v-if="record.executeStatus == 1 && managerOrFinance()">
					<a @click="$refs.examineForm.edit(record)">去审核</a>
					<a-divider type="vertical" />
				</span>
				<span v-if="record.executeStatus == 3 && !managerOrFinance()">
					<a @click="$refs.replaceForm.resubmit(record)">重新提交</a>
					<a-divider type="vertical" />
				</span>
				<a @click="$refs.examineForm.readonly(record)">详情</a>
			</span>
		</s-table>
		<examine-form ref="examineForm" @ok="handleOk" />
		<replace-form ref="replaceForm" @ok="handleOk" />
	</a-card>
</template>

<script>
import { STable } from '@/components'
import { page, audit } from '@/api/modular/main/emsReplaceApply/emsReplaceApply'
import { getUrlParam } from '@/utils/util'
import examineForm from './emsbomReplaceExamineForm.vue'

import replaceForm from '../emsbom/emsBomReplaceForm.vue'

export default {
	components: {
		STable,
		examineForm,
		replaceForm
	},
	mounted() {

	},
	data() {
		return {
			typeList: [], //从字典表获取的分类数据
			advanced: false, // 高级搜索 展开/关闭
			queryParam: {
				materialType: null,
				executeStatus: null
			},  // 查询参数
			columns: [// 表头	
				{
					title: '类型',
					width: '90px',
					dataIndex: 'type',
					customRender: (text, record, index) => record.type == 1 ? '基础bom' : record.type == 2 ? '组合bom' : '海外仓',
				},
				{
					title: '物料名称',
					width: '200px',
					dataIndex: 'emsMaterialResult.materialName',
				},
				{
					title: '料号',
					width: '150px',
					dataIndex: 'emsMaterialResult.materialCode',
				},
				{
					title: '规格',
					width: '100px',
					dataIndex: 'emsMaterialResult.materialModelNumber',
				},
				{
					title: '物料类型',
					width: '90px',
					dataIndex: 'emsMaterialResult.materialTypeName',
				},

				{
					title: '状态',
					width: '100px',
					dataIndex: 'executeStatus',
					scopedSlots: { customRender: 'executeStatus' }
				},
				{
					title: '替换物料名称',
					width: '150px',
					dataIndex: 'replaceEmsMaterialResult.materialName',
				},
				{
					title: '替换物料料号',
					width: '150px',
					dataIndex: 'replaceEmsMaterialResult.materialCode',
				},
				{
					title: '替换物料规格',
					width: '150px',
					dataIndex: 'replaceEmsMaterialResult.materialModelNumber',
				},
				{
					title: '提交时间',
					width: '150px',
					dataIndex: 'createTime',
				},
				{
					title: '提交人',
					width: '200px',
					dataIndex: 'submitMan',
				},
				{
					title: '操作',
					dataIndex: 'action',
					fixed: 'right',
					scopedSlots: { customRender: 'action' }
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				return page(Object.assign(parameter, this.queryParam)).then((res) => {
					return res.data
				})
			},
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			typeList: [
				{
					id: 1,
					name: '基础bom'
				},
				{
					id: 2,
					name: '组合bom'
				},
				{
					id: 3,
					name: '海外仓'
				}
			],
			executeStatusList: [
				{
					id: 1,
					name: '待审核'
				},
				{
					id: 2,
					name: '通过'
				},
				{
					id: 3,
					name: '拒绝'
				},
			],
			toPoolLoading: false,
			materialTypeList: [
				this.$businessEnum.MATERIAL_TYPE_ENUM.material,
				this.$businessEnum.MATERIAL_TYPE_ENUM.customized,
				this.$businessEnum.MATERIAL_TYPE_ENUM.cable,
			]
		}
	},
	computed: {
		routePath() {
			let urlParam = getUrlParam(this.$route.path)
			return urlParam
		},
		bomType() {
			return this.routePath.bomType
		},
		myColumn() {
			let result = this.columns
			if (!this.managerOrFinance()) {
				result = result.filter(item => item.dataIndex !== 'cost')
			}
			return result
		}
	},
	watch: {
		bomType() {
			this.queryParam.bomType = this.bomType
			this.handleOk()
		}
	},
	created() {

	},
	methods: {
		passOrReject(trueorfalse) {
			if (this.selectedRowKeys.length == 0) {
				this.$message.error('至少选择一条数据！！！');
				return;
			}
			let list = this.selectedRows.map(val => val.executeStatus == 1);
			console.log(list);
			if (list.includes(false)) {
				this.$message.error("选中数据中包含已审核的数据");
				return
			}
			// return
			if (trueorfalse) {
				audit({
					replaceApplyIds: this.selectedRowKeys,
					executeStatus: 2
				}).then(res => {
					this.$message.success('操作成功');
					this.handleOk();
					this.selectedRowKeys = [];
					this.selectedRows = [];					
					this.$refs.table.updateSelect(this.selectedRowKeys,this.selectedRows);
				})
			} else {
				audit({
					replaceApplyIds: this.selectedRowKeys,
					executeStatus: 3
				}).then(res => {
					this.$message.success('操作成功');
					this.handleOk();
					this.selectedRowKeys = [];
					this.selectedRows = [];
					this.$refs.table.updateSelect(this.selectedRowKeys,this.selectedRows);
				})
			}
		},
		handleOk() {
			this.$refs.table.refresh()
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}

.table-image {
	cursor: pointer;
	max-width: 100px;
	max-height: 50px;
	border: solid 1px #cccccc;
}
</style>
